<template>
    <show-modal :title="title" width="700px" @cancel="cancel" @submit="submit">
        <el-amap-search-box class="search-box" :search-option="searchOption" :on-search-result="searchResult" />
        <el-amap vid="amap" :events="events" :zoom="zoom" class="amap" :center="center">
            <el-amap-marker
                v-if="marker"
                :position="marker.position"
                :extData="marker"
                :icon="commonLocation"
            >
            </el-amap-marker>
        </el-amap>
        <p style="margin-top: 8px; text-align: right;">位置：{{ showAddress }}，经纬度：{{ lnglat }}</p>
    </show-modal>
</template>

<script>
import {mapState} from 'vuex'
export default {
    name: 'Local',
    props: ['info'],
    props:{
        location:{
            type:String,
            default:''
        },
        address:{
            type:String,
            default:''
        }
    },
    data() {
        let self = this;
        return {
            title: '选择位置信息',
            center: [110.59996, 32.197646],
            searchOption: {
                city: '全国',
                cityLimit: false
            },
            marker: '',
            zoom: 5,
            lnglat: '',
            showAddress:'',
            commonLocation: require('@/assets/map/common_location.png'),
            events: {
                click: e => {
                    let geocoder = new AMap.Geocoder({});
                    let { lng, lat } = e.lnglat;
                    self.lnglat = `${lng},${lat}`;
                    geocoder.getAddress(e.lnglat, function (status, result) {
                        if (status === "complete" && result.regeocode) {
                            self.showAddress = result.regeocode.formattedAddress;
                        } else {
                            log.error("根据经纬度查询地址失败");
                        }
                    });
                    self.marker = {
                        id: 1,
                        name: 'lnglat',
                        icon: 'https://webapi.amap.com/theme/v1.3/m3.png',
                        position: [lng, lat]
                    };
                },
            },
            polygons:[]
        };
    },
    mounted() {
        let location = this.location;
        this.showAddress = this.address;
        if (location) {
            this.lnglat = location;
            let markLocation = location.split(',');
            this.marker = {
                id: 1,
                name: 'lnglat',
                icon: 'https://webapi.amap.com/theme/v1.3/m3.png',
                position: markLocation
            };
        }
        this.geocoder = new AMap.Geocoder({
            radius: 1000,
            extensions: 'all',
            city: '全国'
        });
        if(this.address){
            let that = this;
            this.$confirm({
                title: '定位提示',
                content: `是否接受根据地址(${that.address})定位？`,
                zIndex:9000,
                onOk() {
                    that.searchLocation(that.address)
                },
                onCancel() {},
            });
            
        }

    },
    methods: {
        //查询结果
        searchResult(e) {
            let { location,address } = e[0];
            let { lng, lat } = location;
            this.lnglat = `${lng},${lat}`;
            this.showAddress = address;
            this.marker = {
                id: 1,
                name: 'lnglat',
                icon: 'https://webapi.amap.com/theme/v1.3/m3.png',
                position: [lng, lat]
            };
        },
        submit() {
            let {lnglat,showAddress} = this;
            this.$emit('submit', {lnglat,address:showAddress});
        },
        cancel() {
            this.$emit('cancel');
        },
        searchLocation(cityname) {
            let that = this;
            return new Promise((resolve, reject) => {
                this.geocoder.getLocation(cityname, (status, result) => {
                    console.log(status,result)
                    if (status === 'complete' && result.geocodes.length) {
                        let { lng, lat } = result.geocodes[0].location;
                        let {formattedAddress} = result.geocodes[0]
                        that.center = [lng, lat]
                        if(!this.location){
                            that.marker = {
                                id: 1,
                                name: 'lnglat',
                                icon: 'https://webapi.amap.com/theme/v1.3/m3.png',
                                position: [lng, lat]
                            };
                            that.lnglat = `${lng},${lat}`
                            that.showAddress = formattedAddress
                        }
                        resolve({ lat, lng });
                    } else {
                        reject('');
                    }
                });
            });
        },
    }
};
</script>
<style lang="scss" scoped>
.amap {
    height: calc(100vh - 170px);
}
.search-box {
    position: absolute;
    right: 40px;
    top: 90px;
}
</style>
